<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/admin/adminHeader::html('订单管理')">
</head>
<body>
<div th:replace="include/admin/adminNavigator::html"></div>
<script>
    $(function () {
        var data4Vue = {
            uri:"orders",
            listURL:"admin_order_list",
            beans:[],
            pagination:{}
        };

        var isShow = false;

        var vue = new Vue({
            el:"#workingArea",
            data:data4Vue,
            mounted:function () {
                this.list(0);
            },
            methods:{
                list:function (start) {
                    var url = this.uri +"?start="+start;
                    axios.get(url).then(function(response){
                        vue.pagination = response.data;
                        vue.beans = response.data.content;
                    })
                },
                showOrderItems:function(order){
                    var id = order.id;
                    if(!isShow){
                        $("#orderItemsTR"+id).show();
                        isShow = true;
                    }else{
                        $("#orderItemsTR"+id).hide();
                        isShow = false;
                    }
                },
                jump: function(page){
                    jump(page,vue); //定义在adminHeader.html 中
                },
                jumpByNumber: function(start){
                    jumpByNumber(start,vue);
                },
                deliveryOrder:function (order,e) {
                    var url = "deliveryOrder/"+order.id;
                    axios.put(url).then(function (response) {
                       // $(e.target).hide();
                        location.href=vue.listURL;
                    })
                }
            }
        });

        Vue.filter('formatDateFilter',function (value,formatString) {
            if(null==value){
                return '';
            }
            formatString = 'YYYY-MM-DD HH:mm:ss';
            return moment(value).format(formatString);
        })
    })

</script>
<div id="workingArea">
    <h1 class="label label-info">订单管理</h1>
    <br>
    <br>

    <div class="listDataTableDiv">
        <table class="table table-striped table-bordered table-hover table-condensed">
            <thead>
            <tr class="success">
                <th>状态</th>
                <th>金额</th>
                <th width="100px">商品数量</th>
                <th width="100px">买家名称</th>
                <th>创建时间</th>
                <th>支付时间</th>
                <th>发货时间</th>
                <th>确认收货时间</th>
                <th width="120px">操作</th>
            </tr>
            </thead>
            <tbody>

            <template v-for="bean in beans">
                <tr>
                    <td>
                        {{bean.statusDesc}}
                    </td>
                    <td>
                        {{bean.total}}
                    </td>
                    <td>
                        {{bean.totalNumber}}
                    </td>
                    <td>
                        {{bean.user.name}}
                    </td>
                    <td>
                        {{bean.createDate | formatDateFilter}}
                    </td>
                    <td>
                        {{bean.payDate | formatDateFilter}}
                    </td>
                    <td>
                        {{bean.deliveryDate | formatDateFilter}}
                    </td>
                    <td>
                        {{bean.confirmDate | formatDateFilter}}
                    </td>
                    <td>
                        <button @click ="showOrderItems(bean)" class="orderPageCheckOrderItems btn btn-primary btn-xs">查看详情</button>
                        <button v-if="bean.status=='waitDelivery'" @click="deliveryOrder(bean,$event)" class="btn btn-primary btn-xs">发货</button>
                    </td>
                </tr>

                <tr class="orderPageOrderItemTR" :id="'orderItemsTR'+bean.id">
                    <td colspan="10" align="center">
                        <div class="orderPageOrderItem">
                            <table width="800px" align="center" class="orderPageOrderItemTable">
                                <tr v-for="orderItem in bean.orderItems">
                                    <td align="left">
                                        <img width="40px" height="40px" :src="'img/productSingle/'+orderItem.product.firstProductImage.id+'.jpg'">
                                    </td>

                                    <td>
                                        <a th:href="'product?product.id='+orderItem.product.id">
                                            <span>{{orderItem.product.name}}</span>
                                        </a>
                                    </td>
                                    <td align="right">
                                        <span class="text-muted">{{orderItem.number}}个</span>
                                    </td>
                                    <td align="right">
                                        <span class="text-muted">单价：{{orderItem.product.promotePrice}}</span>
                                    </td>
                                </tr>

                            </table>

                        </div>

                    </td>
                </tr>
            </template>
            </tbody>
        </table>
    </div>

    <div th:replace="include/admin/adminPage::html"></div>
</div>

<div th:replace="include/admin/adminFooter::html"></div>


</body>
</html>